<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="600px" :title="drawerProps.title">
    <template #header>
      <h4>{{ drawerProps.title }}</h4>
    </template>
    
    <div class="detail-container">
      <!-- 基本信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
            <el-tag :type="getStatusType(drawerProps.row.status)">
              {{ getStatusText(drawerProps.row.status) }}
            </el-tag>
          </div>
        </template>
        
        <el-descriptions :column="2" border>
          <el-descriptions-item label="MBOM编码">
            {{ drawerProps.row.mbomCode || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="MBOM名称">
            {{ drawerProps.row.mbomName || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="产品名称">
            {{ drawerProps.row.productName || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="版本">
            {{ drawerProps.row.version || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusType(drawerProps.row.status)">
              {{ getStatusText(drawerProps.row.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建人">
            {{ drawerProps.row.createdBy || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间" :span="2">
            {{ formatDateTime(drawerProps.row.createdTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="描述" :span="2">
            {{ drawerProps.row.description || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- EBOM信息 -->
      <el-card v-if="drawerProps.row.ebomId" class="detail-card" shadow="never">
        <template #header>
          <span>EBOM信息</span>
        </template>
        
        <el-descriptions :column="2" border>
          <el-descriptions-item label="EBOM ID">
            {{ drawerProps.row.ebomId || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="EBOM版本">
            {{ drawerProps.row.ebomVersion || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 审核信息 -->
      <el-card v-if="showReviewInfo" class="detail-card" shadow="never">
        <template #header>
          <span>审核信息</span>
        </template>
        
        <el-descriptions :column="2" border>
          <el-descriptions-item label="审核人">
            {{ drawerProps.row.reviewerName || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="提交时间">
            {{ formatDateTime(drawerProps.row.submitTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="审核时间">
            {{ formatDateTime(drawerProps.row.reviewTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="发布时间">
            {{ formatDateTime(drawerProps.row.releaseTime) }}
          </el-descriptions-item>
          <el-descriptions-item v-if="drawerProps.row.obsoleteTime" label="作废时间" :span="2">
            {{ formatDateTime(drawerProps.row.obsoleteTime) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 操作历史 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <span>操作历史</span>
        </template>
        
        <el-timeline>
          <el-timeline-item
            v-if="drawerProps.row.createdTime"
            :timestamp="formatDateTime(drawerProps.row.createdTime)"
            placement="top"
          >
            <el-card>
              <h4>创建MBOM</h4>
              <p>创建人: {{ drawerProps.row.createdBy }}</p>
            </el-card>
          </el-timeline-item>
          
          <el-timeline-item
            v-if="drawerProps.row.submitTime"
            :timestamp="formatDateTime(drawerProps.row.submitTime)"
            placement="top"
          >
            <el-card>
              <h4>提交审核</h4>
              <p>审核人: {{ drawerProps.row.reviewerName }}</p>
            </el-card>
          </el-timeline-item>
          
          <el-timeline-item
            v-if="drawerProps.row.reviewTime"
            :timestamp="formatDateTime(drawerProps.row.reviewTime)"
            placement="top"
          >
            <el-card>
              <h4>{{ drawerProps.row.status === 'APPROVED' ? '审核通过' : '审核拒绝' }}</h4>
              <p>审核人: {{ drawerProps.row.reviewerName }}</p>
            </el-card>
          </el-timeline-item>
          
          <el-timeline-item
            v-if="drawerProps.row.releaseTime"
            :timestamp="formatDateTime(drawerProps.row.releaseTime)"
            placement="top"
          >
            <el-card>
              <h4>发布MBOM</h4>
            </el-card>
          </el-timeline-item>
          
          <el-timeline-item
            v-if="drawerProps.row.obsoleteTime"
            :timestamp="formatDateTime(drawerProps.row.obsoleteTime)"
            placement="top"
          >
            <el-card>
              <h4>作废MBOM</h4>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
  </el-drawer>
</template>

<script setup lang="ts" name="MBOMDetail">
import { ref, computed } from "vue";
import { MBOM } from "@/api/modules/mbom";

interface DrawerProps {
  title: string;
  row: Partial<MBOM.MBOMListItem>;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  title: "",
  row: {}
});

// 格式化时间
const formatDateTime = (dateTime: string | undefined) => {
  if (!dateTime) return "-";
  return new Date(dateTime).toLocaleString("zh-CN");
};

// 获取状态类型
const getStatusType = (status: string | undefined) => {
  const statusMap: Record<string, string> = {
    DRAFT: "info",
    REVIEWING: "warning", 
    APPROVED: "success",
    RELEASED: "success",
    OBSOLETED: "danger"
  };
  return statusMap[status || ""] || "info";
};

// 获取状态文本
const getStatusText = (status: string | undefined) => {
  const statusMap: Record<string, string> = {
    DRAFT: "草稿",
    REVIEWING: "审核中",
    APPROVED: "已审核", 
    RELEASED: "已发布",
    OBSOLETED: "已作废"
  };
  return statusMap[status || ""] || status || "-";
};

// 是否显示审核信息
const showReviewInfo = computed(() => {
  const status = drawerProps.value.row.status;
  return status && ["REVIEWING", "APPROVED", "RELEASED", "OBSOLETED"].includes(status);
});

// 接收父组件参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

defineExpose({
  acceptParams
});
</script>

<style scoped>
.detail-container {
  padding: 0 20px;
}

.detail-card {
  margin-bottom: 20px;
}

.detail-card:last-child {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
}

:deep(.el-timeline-item__content) {
  padding-bottom: 20px;
}
</style>